import React from 'react'
// MenuConfig定义的一个属性，引入动态菜单数组
import MenuConfig from '../../config'
// 引入antd组件 
// import {
//     MenuFoldOutlined,
//     MenuUnfoldOutlined,
//     UploadOutlined,
//     UserOutlined,
//     VideoCameraOutlined,
//   } from '@ant-design/icons';
// 引入icon的一个对象，上面的就不需要一个个引入
import * as Icon from '@ant-design/icons';

  import { Button, Layout, Menu, theme} from 'antd';
  // 可以实现页面跳转
  import { useNavigate } from 'react-router-dom';

  const { Header, Sider, Content } = Layout;

  // 动态获取icon
const iconToElement =(name) => React.createElement(Icon[name])

//   遍历菜单的数据config/index.js
const items = MenuConfig.map((icon) =>{
    // 没有子菜单 antd的MenuItemType
    const child ={
        key: icon.path,
        icon: iconToElement(icon.icon),
        label:icon.label
    }
    // 有子菜单
    if (icon.children){
        child.children = icon.children.map (item =>{
            return {
                key: item.path,
                label:item.label
            }
        })
    }
    return child

})




// 创建左侧栏组件
const CommonAside = ({collapsed}) =>{

  const navigate = useNavigate();
  console.log(collapsed,"CommonAside")
   
  const useselectMenu = ({ key }) => {
    console.log(key, "selectMenu");
    navigate(key); // 使用已经定义好的 navigate 函数
};

    return (
        // 涉及到跨组件通信问题，这个属性暂时去除
        // <Sider trigger={null} collapsible collapsed={collapsed}>
        <Sider trigger={null}  collapsed={collapsed}>
             <h3 className="app-name">{collapsed ? '后台' : '通用后台管理系统'}</h3>
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={['1']}
              items={items}
            //   将下面写死的菜单通过上面的方法动态获取
            //   items={[
            //     {
            //       key: '1',
            //       icon: <UserOutlined />,
            //       label: 'nav 1',
            //     },
            //     {
            //       key: '2',
            //       icon: <VideoCameraOutlined />,
            //       label: 'nav 2',
            //     },
            //     {
            //       key: '3',
            //       icon: <UploadOutlined />,
            //       label: 'nav 3',
            //     },
            //   ]}
              style={{
                height:'100%'
              }}
              // 添加左边菜单栏的点击事件
              onClick={useselectMenu}
            />
         </Sider>
    )
    
}

export default  CommonAside
